<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Gallery</title>
	<link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<!-- Custom Theme files -->
	<link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
	<!-- Custom Theme files -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--webfont-->
	<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/login.js}"></script>
	<script th:src="@{/js/jquery.easydropdown.js}"></script>
	<!------ Light Box ------>
	<link rel="stylesheet" th:href="@{/css/swipebox.css}">
	<script th:src="@{/js/jquery.swipebox.min.js}"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
	<!------ Eng Light Box ------>
	<script th:src="@{/js/wow.min.js}"></script>
	<link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
	<script>
		new WOW().init();
	</script>
</head>
<body>
<div class="header">
	<div class="col-sm-8 header-left">
		<div class="logo">
			<a th:href="@{/user/toIndex}"><img th:src="@{/images/hotel/logo.png}" alt=""/></a>
		</div>
		<div class="menu">
			<a class="toggleMenu" th:href="@{#}"><img th:src="@{/images/hotel/nav.png}" alt="" /></a>
			<ul class="nav" id="nav">
				<li ><a th:href="@{/user/toIndex}">主页</a></li>
				<li><a th:href="@{/user/toRooms}">房间</a></li>
				<li><a href="news.html">最近活动</a></li>
				<li class="active"><a th:href="@{/user/toGallery}">酒店</a></li>
				<li><a href="404.html">个人中心</a></li>
				<div class="clearfix"></div>
			</ul>
			<script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
		</div>
		<!-- start search-->
		<div class="search-box">
			<div id="sb-search" class="sb-search">
				<form>
					<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
					<input class="sb-search-submit" type="submit" value="">
					<span class="sb-icon-search"> </span>
				</form>
			</div>
		</div>
		<!----search-scripts---->
		<script th:src="@{/js/classie.js}"></script>
		<script th:src="@{/js/uisearch.js}"></script>
		<script>
			new UISearch( document.getElementById( 'sb-search' ) );
		</script>
		<!----//search-scripts---->
		<div class="clearfix"></div>
	</div>
	<div class="col-sm-4 header_right">
		<div id="loginContainer">
			<a href="#" id="loginButton"><img th:src="@{/images/hotel/login.png}">
				<span th:if="${session.person == null}">登  录</span>
				<span th:if="${session.person != null}" th:text="${session.person.userName}"></span>
			</a>

			<div id="registBox">
				<a th:href="@{/pages/toRegist}" id="registButton">
					<span th:if="${session.person == null}">注  册</span>
					<span th:if="${session.person != null}" ></span>
				</a>

				<a th:href="@{/user/logout}" id="logoutButton">
					<span th:if="${session.person != null}">退  出</span>
					<span th:if="${session.person == null}" ></span>
				</a>
			</div>

			<!--<div id="loginBox">-->
				<!--<form id="loginForm">-->
					<!--<fieldset id="body">-->
						<!--<fieldset>-->
							<!--<label for="email">Email Address</label>-->
							<!--<input type="text" name="email" id="email">-->
						<!--</fieldset>-->
						<!--<fieldset>-->
							<!--<label for="password">Password</label>-->
							<!--<input type="password" name="password" id="password">-->
						<!--</fieldset>-->
						<!--<input type="submit" id="login" value="Sign in">-->
						<!--<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>-->
					<!--</fieldset>-->
					<!--<span><a th:href="@{#}">Forgot your password?</a></span>-->
				<!--</form>-->
			<!--</div>-->
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>
<div class="banner">
	<div class="container_wrap">
		<h1>What are you looking for?</h1>
		<div class="dropdown-buttons">
			<div class="dropdown-button">
				<select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
					<option value="0">Dubai</option>
					<option value="1">Australia</option>
					<option value="2">Sri Lanka</option>
					<option value="3"> New Zealand</option>
					<option value="4">Pakistan</option>
					<option value="5">United Kingdom</option>
					<option value="6">United states</option>
					<option value="7">Russia</option>
					<option value="8">Mirum</option>
				</select>
			</div>
			<div class="dropdown-button">
				<select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
					<option value="0">Hotels</option>
					<option value="1">tempor</option>
					<option value="2">congue</option>
					<option value="3">maxim </option>
					<option value="4">mutationem</option>
					<option value="5">hendrerit </option>
					<option value="5"></option>
					<option value="5"></option>
				</select>
			</div>
		</div>
		<form>
			<input type="text" value="Keyword, name, date, ..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Keyword, name, date, ...';}">
			<div class="contact_btn">
				<label class="btn1 btn-2 btn-2g"><input name="submit" type="submit" id="submit2" value="Search"></label>
			</div>
		</form>
		<div class="clearfix"></div>
	</div>
</div>
<div class="content_top">
	<div class="container">
		<div class="col-md-4 bottom_nav">
			<div class="content_menu">
				<ul>
					<li class="active"><a th:href="@{#}">Recommended</a></li>
					<li><a th:href="@{#}">Latest</a></li>
					<li><a th:href="@{#}">Highlights</a></li>
				</ul>
			</div>
		</div>
		<div class="col-md-4 content_dropdown1">
			<div class="content_dropdown">
				<select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
					<option value="0">Dubai</option>
					<option value="1">tempor</option>
					<option value="2">congue</option>
					<option value="3">maxim </option>
					<option value="4">mutationem</option>
					<option value="5">hendrerit </option>
					<option value="5"></option>
					<option value="5"></option>
				</select>
			</div>
			<div class="content_dropdown">
				<select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
					<option value="0">Show Map</option>
					<option value="1">tempor</option>
					<option value="2">congue</option>
					<option value="3">maxim </option>
					<option value="4">mutationem</option>
					<option value="5">hendrerit </option>
					<option value="5"></option>
					<option value="5"></option>
				</select>
			</div>
		</div>
		<div class="col-md-4 filter_grid">
			<ul class="filter">
				<li class="fil">Filter :</li>
				<li><a th:href="@{#}"> <i class="icon1"> </i> </a></li>
				<li><a th:href="@{#}"> <i class="icon2"> </i> </a></li>
				<li><a th:href="@{#}"> <i class="icon3"> </i> </a></li>
				<li><a th:href="@{#}"> <i class="icon4"> </i> </a></li>
				<li><a th:href="@{#}"> <i class="icon5"> </i> </a></li>
			</ul>
		</div>
	</div>
</div>
<div class="living_middle">
	<div class="container">
		<div class="entertain_box wow fadeInLeft" data-wow-delay="0.4s">
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p1.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p2.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p2.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p3.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p3.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}"> Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p4.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p4.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="entertain_box1 wow fadeInRight" data-wow-delay="0.4s">
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p5.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p5.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p6.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p6.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p7.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p7.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p> voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box">
				<a th:href="@{/images/hotel/p8.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/hotel/p8.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a th:href="@{#}">Hotel</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<div class="living_bottom">
	<div class="container">
		<h2 class="title block-title">Latest Posts</h2>
		<div class="col-md-6 post_left wow fadeInLeft" data-wow-delay="0.4s">
			<div class="mask1"><img th:src="@{/images/hotel/pic4.jpg}" alt="image" class="img-responsive zoom-img" /></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a th:href="@{single.html}">More</a></p>
			<div class="divider"></div>
			<p class="field-content">30 Sep 2015</span></p>
		</div>
		<div class="col-md-6 post_left wow fadeInRight" data-wow-delay="0.4s">
			<div class="mask1"><img th:src="@{/images/hotel/pic5.jpg}" alt="image" class="img-responsive zoom-img" /></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a th:href="@{single.html}">More</a></p>
			<div class="divider"></div>
			<p class="field-content">30 Sep 2015</span></p>
		</div>
	</div>
</div>
<div class="footer">
	<div class="container">
		<div class="footer_top">
			<h3>Subscribe to our newsletter</h3>
			<form>
		<span>
			<i><img th:src="@{/images/hotel/mail.png}" alt=""></i>
		    <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="Subscribe"> </label>
		    <div class="clearfix"> </div>
		</span>
			</form>
		</div>
		<div class="footer_grids">
			<div class="footer-grid">
				<h4>Ipsum Quis</h4>
				<ul class="list1">
					<li><a th:href="@{contact.html}">Contact</a></li>
					<li><a th:href="@{#}">Mirum est</a></li>
					<li><a th:href="@{#}">Placerat facer</a></li>
					<li><a th:href="@{#}">Claritatem</a></li>
					<li><a th:href="@{#}">Sollemnes </a></li>
				</ul>
			</div>
			<div class="footer-grid">
				<h4>Quis Ipsum</h4>
				<ul class="list1">
					<li><a th:href="@{#}">Placerat facer</a></li>
					<li><a th:href="@{#}">Claritatem</a></li>
					<li><a th:href="@{#}">Sollemnes </a></li>
					<li><a th:href="@{#}">Claritas</a></li>
					<li><a th:href="@{#}">Mirum est</a></li>
				</ul>
			</div>
			<div class="footer-grid last_grid">
				<h4>Follow Us</h4>
				<ul class="footer_social wow fadeInLeft" data-wow-delay="0.4s">
					<li><a th:href="@{#}"> <i class="fb"> </i> </a></li>
					<li><a th:href="@{#}"><i class="tw"> </i> </a></li>
					<li><a th:href="@{#}"><i class="google"> </i> </a></li>
					<li><a th:href="@{#}"><i class="u_tube"> </i> </a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>


</body>
</html>		